<template>
	<view class="wrapper">
		<!-- <view class="login" @click="islogin" :style="{'display':mask?'block':'none'}"></view> -->
		<view class="outtop" :style="{ paddingTop: statusBarHeight + menuButtonHeight + 'px' }">
			<view class="top-tab">
				<view class="tab-item" :class="{ active: item.value === topTap }" v-for="item in topTabs" :key="item.value">{{ item.label }}</view>
			</view>
			<view class="topwrapper">
				<view class="addressSelect" @click="showCityPicker" :style="{ height: menuButtonHeight + 'px' }">
					<view class="addres">{{ sameCity.name }}</view>
					<view class="downicon"></view>
				</view>
				<view class="search">
					<text class="wlIcon-sousuo1 text-bold" style="margin-right:10rpx" @click="handleSearch"></text>
					<input
						@confirm="confirm"
						:adjust-position="false"
						type="text"
						v-model="params.search"
						placeholder="请输入关键词进行搜索"
						confirm-type="search"
					/>
				</view>
			</view>
		</view>

		<!-- <view class="btnwra" v-if="showjumpmini"> -->
		<!-- <view class="item" @click="gotosx" style="background-image:url('https://adminshop.12sxb.cn/uploads/jumpbg.png')">{{params.area}}商协会</view> -->
		<!-- 	<view class="item">人人聚家政</view> -->
		<!-- </view> -->

		<view class="menuwrapper">
			<swiper class="talkswiper" style="width:100%;height:310rpx" @change="menuswiperchange">
				<swiper-item class="talksitem" v-for="(item, index) in listtrans" :key="index">
					<view style="width:100%;height:100%;display:flex;justify-content: flex-start;align-items: flex-start; flex-flow:row wrap;">
						<view style="text-align: center; width:25% " v-for="(it, ind) in item" :key="it.text" @click="change(index, ind, it)">
							<view>
								<image :src="cdnurl + it.img"></image>
								<view :class="{ act: index === outindex && ind === currind }">{{ it.text }}</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>

			<view class="dotwrpper">
				<view v-for="(item, index) in listtrans" :key="index" class="dot" :class="{ active: index == outindex }"></view>
			</view>
			<!-- <view class="notice">
				<view class="left">公告播报:</view>
				<view class="right">
					<swiper class="notice-swiper" circular="true" vertical="true" autoplay="true" interval="3000">
						<swiper-item v-for="(item, index) in noticeList" :key="index">
							<view class="wanlpage-notice">
								<text>{{item}}</text>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view> -->
		</view>

		<!--底部悬浮按钮-->
		<view class="margin-bottom-lg" style="position: fixed;right:40rpx;z-index: 99999999">
			<uni-fab
				ref="fab"
				:pattern="pattern"
				:content="content"
				horizontal="right"
				vertical="bottom"
				:direction="direction"
				backgroundColor="transparent"
				@trigger="trigger"
			>
				<view class="fix-btn">
					<image src="/static/images/post.png" mode="widthFix" style="width: 48rpx;"></image>
					发布
				</view>
			</uni-fab>
		</view>

		<view class="swiperwrapper">
			<swiper
				class="swiper"
				circular
				:indicator-dots="true"
				:autoplay="true"
				:interval="2000"
				:duration="500"
				indicator-active-color="#fff"
				indicator-color="rgba(0,0,0,.2)"
			>
				<swiper-item class="sitem" v-for="(item, index) in bannersList" :key="index">
					<image :src="'https://adminshop.12sxb.cn' + item.url" mode="scaleToFill" style="width: 100%;"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="tagtitle"><image src="/static/images/rec-title.png" mode="widthFix" style="width: 228rpx;"></image></view>

		<!-- 话题内容列表 -->
		<!-- 主体 -->
		<block v-if="localList.length > 0">
			<wanl-local-list
				ref="findListRef"
				:dataList="localList"
				:last_page="last_page"
				:current_page="params.page"
				:isComment="common.appConfig.comment_switch"
				currentItemId="find"
				:height="wanlsys.windowHeight"
				:width="wanlsys.windowWidth - 48"
			></wanl-local-list>
		</block>
		<block v-if="localList.length === 0 && status !== 'loading'"><wanl-empty :text="empty" /></block>
		<uni-load-more v-if="localList.length > 0" :status="status" :content-text="contentText" />

		<!--定位选择城市-->
		<mpvue-city-picker
			:themeColor="themeColor"
			ref="mpvueCityPicker"
			:pickerValueDefault="cityPickerValueDefault"
			@onConfirm="onConfirm"
		></mpvue-city-picker>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import config from '@/common/config/config.js';
import WanlLocalList from '@/components/wanl-local/lists.vue';
import WanlEmpty from '@/components/wanl-empty/wanl-empty.vue';
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
import qqmapwx from '@/static/js/qqmap-wx-jssdk.min.js';
import Debounce from '@/utils/debounce.js';
export default {
	computed: {
		...mapState(['common'])
	},
	components: {
		WanlEmpty,
		mpvueCityPicker,
		WanlLocalList
	},

	data() {
		return {
			showjumpmini: false,

			statusBarHeight: 0, //顶部高度，
			menuButtonHeight: 0, //胶囊按钮高度

			getMoney: '',

			notgc: ['热门事件', '生活服务', '闲置物品', '招聘', '促销信息'], //非谷城可见的菜单
			topTabs: [
				{
					label: '本地信息',
					value: 'info'
				},
				{
					label: '本地商协会',
					value: 'team'
				},
				{
					label: '大家来评',
					value: 'comments'
				}
			],
			topTap: 'info',
			cdnurl: config.cdnurl,
			wanlsys: {},
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			bannersList: [],

			noticeList: [],

			list: [], //话题分类列表
			listtrans: [],
			outindex: 0,
			currind: '',
			localList: [], //话题发布列表
			activeiIndex: 0,
			title: 'uni-fab',
			direction: 'horizontal',
			pattern: {
				color: '#7A7E83',
				backgroundColor: '#fff',
				selectedColor: '#1747CD',
				buttonColor: '#1747CD',
				iconColor: '#fff'
			},
			is_color_type: false,
			content: [
				{
					iconPath: '/static/images/tabbar/find.png',
					selectedIconPath: '/static/images/tabbar/findHL.png',
					path: `/pages/local/post`,
					text: '发布',
					active: false
				},
				// {
				// 	iconPath: '/static/images/tabbar/category.png',
				// 	selectedIconPath: '/static/images/tabbar/categoryHL.png',
				// 	path: `/pages/business`,
				// 	text: '商城',
				// 	active: false
				// },
				{
					iconPath: '/static/images/tabbar/user.png',
					selectedIconPath: '/static/images/tabbar/userHL.png',
					path: '/pages/local/my',
					text: '我的',
					active: false
				}
			],
			sameCity: {
				name: ' 定位中..'
			},
			themeColor: '#007AFF',
			cityPickerValueDefault: [0, 0, 1],
			pickerText: '',
			params: {
				province: '',
				city: '',
				area: '',
				search: '',
				type_id: '',
				page: 1
			},
			reload: false, //判断是否上拉
			last_page: 0,
			status: 'loading',
			contentText: {
				contentdown: '',
				contentrefresh: '正在加载..',
				contentnomore: '没有更多数据了'
			},
			pagesNum: 1,
			empty: '暂未发布内容~',

			mask: false
		};
	},

	async onLoad(options) {
		let that = this;

		console.log(options);

		if (options.uid) {
			//this.$store.state.user.upuserid = options.uid;
			this.$store.dispatch('user/setUpuserid', options.uid);
		}

		if (options.scene && options.scene != '') {
			let scene = decodeURIComponent(options.scene);
			console.log(scene);
			let tag = scene.split(':');
			if (tag[0] == 't') {
				uni.request({
					url: '/wanlshop/local_life/fromtongji',
					method: 'post',
					data: {
						type: tag[1]
					}
				});
			}
		}

		uni.request({
			url: '/wanlshop/local_life/showjumpmini',
			method: 'post',
			success(res) {
				if (res.data.jumpmini == 0) {
					that.showjumpmini = false;
				} else {
					that.showjumpmini = true;
				}
			}
		});

		const sys = uni.getSystemInfoSync();
		this.wanlsys = {
			headTop: sys.statusBarHeight,
			windowWidth: sys.windowWidth,
			windowHeight: sys.windowHeight,
			windowBottom: 0
		};
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		this.menuButtonHeight = menuButtonInfo.height;
		this.statusBarHeight = menuButtonInfo.top;

		this.getAddress().then(res => {
			this.loadData();
		});
		this.reload = true;
		await this.getBanners();
		await this.getNotices();
		let userinfo = uni.getStorageSync('wanlshop:user');
		if (userinfo) {
			this.mask = false;
		} else {
			this.mask = true;
		}
	},

	onShareAppMessage() {},

	onShareTimeline() {},

	// 监听上拉刷新
	onPullDownRefresh() {
		this.params.page = 1;
		this.reload = true;
		this.getAddress().then(res => {
			this.loadData();
		});
		// if (Object.keys(this.$store.state.common.addressData).length > 0) {
		// 	this.params.page = 1;
		// 	this.reload = true;
		// 	this.loadData();
		// } else {
		// 	uni.stopPullDownRefresh()
		// 	uni.showToast({
		// 		title: '位置获取失败',
		// 		icon: 'error'
		// 	})
		// 	this.status = 'noMore';
		// 	this.empty = '请重新获取定位~'
		// }
	},
	// 下拉加载
	onReachBottom() {
		if (this.params.page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.contentText.contentdown = '上拉显示更多';
			this.params.page = this.params.page + 1; //页码+1
			this.status = 'loading';
			this.loadData();
		}
	},
	// 监听滚动
	onPageScroll(object) {
		if (object.scrollTop > this.WanlScroll) {
			this.scrollStype = false;
		} else {
			this.scrollStype = true;
		}
		if (object.scrollTop < 0) {
			this.scrollStype = false;
		}
		this.WanlScroll = object.scrollTop;
	},

	methods: {
		gotosx() {
			uni.showModal({
				title: '跳转小程序',
				content: '您现在要跳转到商协会小程序',
				success: function(res) {
					if (res.confirm) {
						uni.navigateToMiniProgram({
							appId: 'wx28cbaf5f6acd50c7',
							path: 'pages/index/index',
							envVersion: 'release',
							success(res) {
								cosnole.log(res);
							},
							fail(e) {
								console.log(e);
							}
						});
					} else if (res.cancel) {
						return;
					}
				}
			});
		},

		menuswiperchange(event) {
			this.outindex = event.detail.current;
		},

		getredenvelope: Debounce(function() {
			let that = this;
			uni.request({
				url: '/wanlshop/local_life/getredenvelope',
				success: res => {
					console.log(res);
					if (res.data.tag == 1) {
						that.getMoney = res.data.money;
						setTimeout(() => {
							that.$refs.redenvelopepopup.close();
						}, 3000);
					} else {
						uni.showToast({
							title: '网络错误,请重试',
							icon: 'none'
						});
					}
				}
			});
		}, 5000),

		islogin() {
			this.$wanlshop.auth('/pages/local');
		},

		//获取轮播图
		getBanners() {
			uni.request({
				url: '/common/banners?type=1',
				success: res => {
					this.bannersList = res.data;
				}
			});
		},
		//获取公告
		getNotices() {
			uni.request({
				url: '/wanlshop/local_life/notices',
				success: res => {
					this.noticeList = res.data;
				}
			});
		},
		//获取话题类型列表
		async loadData() {
			await uni.request({
				url: '/wanlshop/local_life/getTypes',
				type: 'get',
				success: res => {
					this.list = res.data;

					let listtrans = this.list.reduce((prev, curr, index) => {
						let ind = Math.floor(index / 10);
						if (!prev[ind]) {
							prev[ind] = [];
						}
						prev[ind].push(curr);
						return prev;
					}, []);

					console.log(listtrans);
					uni.setStorageSync('localType', res.data);
					this.listtrans = listtrans;

					this.params.type_id = this.params.type_id ? this.params.type_id : '';
					if (this.params.type_id == '') {
						this.activeiIndex = '';
					}
					this.getList();
				}
			});
		},

		// 获取大列表
		async getList() {
			let type_id = this.params.type_id;
			let search = this.params.search;
			let province = this.params.province;
			let city = this.params.city;
			let area = this.params.area;
			let page = this.params.page;

			if (!this.params.province) {
				let _addressData = uni.getStorageSync('addressData'); /*全局缓存相关的数据*/
				if (_addressData) {
					let addressData = JSON.parse(_addressData);
					if (addressData.province) {
						this.params.province = addressData.province;
						province = this.params.province;
					}
					if (addressData.city) {
						this.params.city = addressData.city;
						city = this.params.city;
					}
					if (addressData.district) {
						this.params.area = addressData.district;
						area = addressData.district;
					}
				}
			}

			if (province && city && area) {
				await uni.request({
					url: `/wanlshop/local_life/getList?type_id=${type_id}&province=${province}&city=${city}&area=${area}&search=${search}&page=${page}`,
					type: 'get',
					success: res => {
						uni.stopPullDownRefresh();
						this.status = res.data.total == 0 ? 'noMore' : 'more';
						this.localList = this.reload ? res.data.data : this.localList.concat(res.data.data); //数据 追加
						console.log('话题列表');
						this.params.page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
					}
				});
			} else {
				this.status = 'noMore';
			}
		},

		//切换话题选项卡
		change(index, ind, item) {
			//console.log(item)
			//this.activeiIndex = index
			//console.log(index,ind,item);

			this.outindex = index;
			this.currind = ind;

			this.params.type_id = item.value;
			this.getList();
		},

		//三个悬浮按钮点击
		trigger(e) {
			console.log(e.item);

			if (e.item.path == `/pages/business`) {
				uni.switchTab({
					url: e.item.path
				});
			} else if (e.item.path == `/pages/local/post`) {
				//先判断是否实名认证，否则先去实名认证
				//获取认证状态
				uni.request({
					url: '/wanlshop/passport/getPassportStatus',
					type: 'get',
					success: res => {
						if (res.data.status === 1) {
							uni.navigateTo({
								url: e.item.path
							});
						} else {
							uni.showModal({
								title: '提示',
								showCancel: false,
								content: '还未认证，请先完成个人认证或商家认证',
								success() {
									uni.navigateTo({
										url: '/pages/user/setting/personal'
									});
								}
							});
						}
					}
				});
			} else {
				uni.navigateTo({
					url: e.item.path
				});
			}
		},
		//显示地址三级联动
		showCityPicker() {
			this.$refs.mpvueCityPicker.show();
		},
		//三级联动
		onConfirm(e) {
			console.log(e);
			this.pickerText = JSON.stringify(e);
			let arr = e.label.split('-');
			this.sameCity.name = arr[arr.length - 1];

			console.log(arr);
			this.params.province = arr[0];
			this.params.city = arr[1];
			this.params.area = arr[2];
			this.$nextTick(() => {
				this.getList();
			});

			//console.log(this.params.area)
		},

		//搜索
		handleSearch() {
			//console.log(this.params.search)
			this.getList();
		},
		//监听搜索
		confirm(e) {
			this.params.search = e.detail.value;
			this.getList();
		},

		// getAddress(){
		// 	if(!this.params.province && !this.params.city && !this.params.area){
		// 		let res = this.$store.state.common.addressData
		// 		if(Object.keys(res).length !== 0){
		// 			this.params.province = res.address.province
		// 			this.params.city = res.address.city
		// 			this.params.area = res.address.district
		// 			this.sameCity.name = this.params.area
		// 		}
		// 	}
		// },

		getAddress() {
			let that = this;

			//测试段——————————————————————————————————————————————————
			if (config.test) {
				return new Promise((resolve, reject) => {
					if (Object.keys(this.$store.state.common.addressData).length > 0) {
						resolve('ok');
					}
					let add = {
						latitude: 32.1524,
						longitude: 111.372,
						address: {
							city: '襄阳市',
							citycode: '0710',
							country: '中国',
							district: '谷城县',
							province: '湖北省',
							towncode: '420625500000',
							township: '薤山林场',
							latitude: 32.1524,
							street: '汉和路',
							longitude: 111.372,
							neighborhood: {
								name: '小吃街'
							}
						}
					};

					this.$store.commit('common/setAddress', add);

					let res2 = this.$store.state.common.addressData;
					if (Object.keys(res2).length !== 0) {
						that.params.province = res2.address.province;
						that.params.city = res2.address.city;
						that.params.area = res2.address.district;
						that.sameCity.name = that.params.area;

						// if (res2.address.district == "谷城县") {
						// 	if (uni.getStorageSync("wanlshop:user")) {

						// 		//查询红包是否开启
						// 		uni.request({
						// 			url: "/wanlshop/local_life/redenvelopestatus",
						// 			success(res) {
						// 				if (res.data.canget == 1) {
						// 					that.$refs.redenvelopepopup.open();
						// 				}
						// 			}
						// 		})
						// 	}

						// }
					}

					resolve('ok');
				});
			} else {
				return new Promise((resolve, reject) => {
					if (Object.keys(this.$store.state.common.addressData).length > 0) {
						resolve('ok');
					}
					let qqmapsdk = new qqmapwx({
						key: '7LHBZ-JGG6W-72RR6-YDOJY-LNRCS-FVB55' //后端给的key
					});

					uni.getLocation({
						type: 'gcj02',
						geocode: true,
						isHighAccuracy: true,
						altitude: true,
						success: res => {
							const latitude = res.latitude;
							const longitude = res.longitude;
							// const latitude = 32.1637;
							// const longitude = 111.3922;
							qqmapsdk.reverseGeocoder({
								location: {
									latitude,
									longitude
								},
								success: function(res1) {
									let address = res1.result.address_component;
									address.township = res1.result.address_reference.town.title;

									try {
										address.neighborhoodname = res1.result.address_reference.street.title
											? res1.result.address_reference.street.title
											: '';
										address.street = res1.result.address_reference.street.title ? res1.result.address_reference.street.title : '';
									} catch (err) {
										address.neighborhoodname = '';
										address.street = '';
									}

									address.neighborhood = {
										name: address.neighborhoodname
									};
									const addressData = {
										address: address,
										latitude: latitude,
										longitude: longitude,
										township: address.township,
										neighborhood: {
											name: address.neighborhoodname
										}
									};
									address.longitude = longitude;
									address.latitude = latitude;

									uni.setStorageSync('addressData', JSON.stringify(address)); /*全局缓存相关的数据*/
									that.$store.commit('common/setAddress', addressData);

									let res2 = that.$store.state.common.addressData;
									if (Object.keys(res2).length !== 0) {
										that.params.province = res2.address.province;
										that.params.city = res2.address.city;
										that.params.area = res2.address.district;
										that.sameCity.name = that.params.area;
										// if (res2.address.district == "谷城县") {
										// 	if (uni.getStorageSync("wanlshop:user")) {
										// 		//查询红包是否开启
										// 		uni.request({
										// 			url: "/wanlshop/local_life/redenvelopestatus",
										// 			success(res) {
										// 				if (res.data.canget ==
										// 					1) {
										// 					that.$refs
										// 						.redenvelopepopup
										// 						.open();
										// 				}
										// 			}
										// 		})
										// 	}
										//}
									}
									resolve('ok');
								},
								fail: function(error) {
									reject(error);
								},
								complete: function(res) {
									resolve('ok');
								}
							});
						}
					});
				});
			}

			// 测试段——————————————————————————————————————————————————
		},

		oss(url, w = 120, h = 120, modenum = 2, type = '', format = 'jpg', resize = 'resize', multiple = 3) {
			let ossStc = this.$store.state.common.appUrl.oss;
			let image = '';
			let mode = ['m_lfit', 'm_mfit', 'm_fill', 'm_fixed'];
			// 图像，自适应方向：1，渐进显示：1，转换格式：jpg，图片质量：q_90，图片锐化：50，浓缩图
			let rule = [
				'?x-oss-process=image',
				'auto-orient,1',
				'interlace,1',
				'format,jpg',
				'quality,q_90',
				'sharpen,50',
				'resize,m_fixed,w_120,h_120'
			];
			// 转换格式
			if (format == 'png') {
				rule[3] = ['format', 'png'].join(',');
			}
			// 判断是否有高度
			if (w == 0) {
				rule[6] = [resize, mode[modenum], `h_${h * multiple}`].join(',');
			} else if (h == 0) {
				rule[6] = [resize, mode[modenum], `w_${w * multiple}`].join(',');
			} else {
				rule[6] = [resize, mode[modenum], `w_${w * multiple}`, `h_${h * multiple}`].join(',');
			}
			//当地址不存在
			if (url) {
				if (/^data:image\//.test(url)) {
					image = url;
				} else if (/^(http|https):\/\/.+/.test(url)) {
					rule.pop();
					image = url + rule.join('/');
				} else {
					image = ossStc + url + rule.join('/');
				}
			} else {
				if (type == 'transparent') {
				} else if (type == 'avatar') {
					image = ossStc + '/common/mine_def_touxiang_3x.png';
				} else {
					image = ossStc + '/common/img_default3x.png';
				}
			}
			return image;
		}
	}
};
</script>

<style lang="scss" scoped>
.wrapper {
	width: 100%;
	min-height: 100vh;

	.top-tab {
		display: flex;
		gap: 24rpx;
		.tab-item {
			height: 56rpx;
			line-height: 56rpx;
			border-radius: 8rpx;
			padding: 0 16rpx;
			color: #fff;
			&.active {
				background: linear-gradient(180deg, #669eff 0%, #63dbff 100%);
			}
		}
	}
	.login {
		top: 0;
		left: 0;
		position: fixed;
		background: transparent;
		min-height: 100vh;
		width: 100vw;
		z-index: 10000;
	}

	.act {
		color: orangered;
	}

	.outtop {
		width: 100%;
		padding-bottom: 20rpx;
		background: url(/static/images/local-bg.png) no-repeat;
		background-size: cover;
		padding-left: 24rpx;
		padding-right: 24rpx;
		box-sizing: border-box;
		height: 446rpx;

		.topwrapper {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			gap: 32rpx;
			margin-top: 40rpx;
			.addressSelect {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: #fff;
				.downicon {
					margin-left: 16rpx;
					width: 0;
					height: 0;
					border-left: 10rpx solid transparent;
					border-right: 10rpx solid transparent;
					border-top: 16rpx solid #fff;
				}
			}
		}

		.search {
			flex: 1;
			margin: 0 auto;
			background: #fff;
			border-radius: 40rpx;
			height: 80rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			color: #aaa;
			padding: 0 30rpx;
			box-sizing: border-box;
		}
	}
	.swiperwrapper {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;
		padding: 24rpx;
		.swiper {
			width: 100%;
			height: 200rpx;
			border-radius: 30rpx;
			overflow: hidden;
			box-sizing: border-box;
			.sitem {
				width: 00%;
				height: 200rpx;
				background: hotpink;
				border-radius: 30rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 200rpx;
					border-radius: 30rpx;
					overflow: hidden;
				}
			}
		}
	}
	.menuwrapper {
		width: 700rpx;
		height: 360rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin: 20rpx auto;
		background: #f7f7f7;
		margin-top: -60rpx;
		border-radius: 24rpx;
		box-shadow: 0rpx 8rpx 54rpx 0rpx rgba(21, 69, 197, 0.26);
		.talkswiper {
			.talksitem {
				color: #333;
				font-size: 24rpx;

				image {
					width: 72rpx;
					height: 72rpx;
				}
			}
		}

		.dotwrpper {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			.dot {
				width: 40rpx;
				height: 5rpx;
				background: #aaa;
				margin-right: 20rpx;
			}

			.active {
				background: #1545c5 !important;
			}

			.act {
				background: #333;
			}
		}

		.notice {
			width: 700rpx;
			height: 80rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			color: red;

			.left {
				font-size: 30rpx;
				color: #222;
			}

			.right {
				.notice-swiper {
					width: 550rpx;
					height: 60rpx;

					.wanlpage-notice {
						width: 100%;
						height: 60rpx;
						line-height: 60rpx;
						color: #aaa;
						font-size: 30rpx;
						padding-left: 10rpx;
					}
				}
			}
		}
	}

	.tagtitle {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 32rpx 0;
	}

	.margin-bottom-lg {
		position: relative;

		.des {
			width: 130rpx;
			background: linear-gradient(to bottom, #fb7268, #fda27e);
			color: #fff;
			text-align: center;
			height: 45rpx;
			line-height: 45rpx;
			border-radius: 10rpx;
			margin: 0 auto;
			position: fixed;
			right: 18rpx;
			bottom: 14rpx;
			//transform: translate(20%,380%);
		}
	}
}

.btnwra {
	margin-top: 18rpx;
	width: 100%;
	padding: 20rpx 0 20rpx 40rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.item {
		width: 686rpx;
		height: 88rpx;
		background-size: 100% 100%;
		border-radius: 20rpx;
		color: #fc5319;
		font-size: 40rpx;
		text-align: center;
		line-height: 88rpx;
		font-weight: bold;
		letter-spacing: 10rpx;
		padding-left: 50rpx;
		text-shadow: 0 0 5px #fff;
	}
}
.fix-btn {
	display: flex;
	flex-direction: column;
	color: #fff;
	font-weight: normal;
}
</style>
